<template>
  <div class="Times">
    <span class="date">{{ year }}-{{ mou }}-{{ day }} {{ nowTime }}</span>
    <span class="week">{{ week }}</span>
  </div>
</template>

<script>
export default {
  name: "AppTime",
  data() {
    return {
      year: new Date().getFullYear(),
      mou: new Date().getMonth() + 1,
      day: new Date().getDate(),
      nowTime: new Date().toLocaleTimeString(),
      week: this.setWeek(new Date().getDay()),
    };
  },
  methods: {
    setWeek(week) {
      let day;
      switch (week) {
        case 0:
          day = "星期日";
          break;
        case 1:
          day = "星期一";
          break;
        case 2:
          day = "星期二";
          break;
        case 3:
          day = "星期三";
          break;
        case 4:
          day = "星期四";
          break;
        case 5:
          day = "星期五";
          break;
        case 6:
          day = "星期六";
          break;
      }
      return day;
    },
    setDate(obj) {
      this.$set(obj, "year", this.year);
      this.$set(obj, "mou", this.mou);
      this.$set(obj, "day", this.day);
      this.$set(obj, "nowTime", this.nowTime);
      this.$set(obj, "week", this.week);
      // console.log(obj);
      this.$bus.$emit("sendTimeDate", obj);
    },
  },
  mounted() {
    setInterval(() => {
      let date = new Date();
      this.year = date.getFullYear();
      this.mou = date.getMonth() + 1;
      this.day = date.getDate();
      this.nowTime = date.toLocaleTimeString();
      this.week = this.setWeek(date.getDay());
    }, 1000);
    this.$bus.$on("setDate", this.setDate);
  },
  
};
</script>

<style>
.Times {
  width: 200px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  position: absolute;
  top: 0%;
  color: #000;
  line-height: 12px;
}
</style>